<script setup>
import {defineProps} from 'vue'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const props=defineProps({
  periodDataList:{type:Array,default:()=>[]},
  periodDataTitle:{type:Array,default:()=>[]},
  slotValue:{type:Boolean,default:false}
})

// 过滤字符串过于长
function filters(value){
   if(!value) return ''
   if(value.length>3){
    return value.slice(0,2)+'...'
   }
   return value
}
</script>

<template>
  <div class="table-wrap">
    <div class="titleContent" :style="slotValue?'justify-content: space-around;':'justify-content: space-evenly'">
      <div class="tit" v-for="(item,index) in periodDataTitle" :key="index">
         {{ item.name }}
      </div>
    </div>
 
    <!-- 配置详情请见 README.md -->
    <vue3-seamless-scroll
      :list="periodDataList"
      class="scroll"
      direction="up"
      :step="0.5"
      :hover="true"
      :limit-scroll-num="6"
      :is-watch="true"
      :single-height="0"
      :single-width="0"
      :single-wait-time="1000"
      :wheel="false"
    >
    <!-- item.slots -->
     <!-- {{ periodDataList }} -->
      <div class="countContent" v-for="(item, i) in periodDataList" :key="i"> 
        <div :style="item.slots?'width: 30%':'width: 40%'" class="descr">{{item.deptCode}}</div>
        <div :style="item.slots?'width: 25%':'width: 33.33%'" v-if="item.slots" class="descr">{{ item.FbTarget }}</div>
        <div :style="item.slots?'width: 25%':'width: 33.33%'" class="descr">{{ item.v }}</div>
        <div :style="item.slots?'width: 20%':'width: 20%'" class="descr">{{ item.FbTime }}</div>
        <!-- <div class="descr">{{ }}</div> -->
      </div>
    </vue3-seamless-scroll>
  </div>
</template>

<style lang="scss" scoped>
/* 轮播列表样式 */
.table-wrap {
  width: 100%;
  margin-top: 35px;
  .scroll {
    max-height: 115px;
    overflow: hidden;
  }
}
// .titleContent {
//   display: flex;
//   align-items: center;
//   justify-content: space-around;
//   height: 36px;
//   background: #F1F3F7;

//   font-family: PingFangSC-Medium;
//   font-size: 13px;
//   color: #5A5E66;
//   font-weight: 500;
//   .tit {
//     flex: 0 0 21.6%;
//     text-align: center;
//   }
// }
.titleContent {
  display: flex;
  align-items: center;
  // justify-content: space-around;
  height: 36px;
  background: #F1F3F7;

  font-family: PingFangSC-Medium;
  font-size: 13px;
  color: #5A5E66;
  font-weight: 500;
}

.titleContent .tit {
  text-align: center;
}

/* 调整宽度比例 */
.titleContent .tit:nth-child(1),
.titleContent .tit:nth-child(2) {
  flex: 0 0 19%; /* 前两个宽 */
}

.titleContent .tit:nth-child(3) {
  flex: 0 0 20%; /* 最后一个窄 */
}
.countContent {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  justify-content: flex-start;
  width: 100%;

  // height: 31px;
  line-height: 40px;
  font-family: PingFangSC-Regular;
  font-size: 13px;
  color: #5A5E66;
  font-weight: 400;
  word-wrap: break-word; /* 自动折行 */
  margin: 10px 0;
  .descr {
    // flex: 1 0 16%;
    // padding: 1px 0;
    // text-align: center;
    // display: flex;
    // width: 75px;
    // width: 30%;
    line-height: 21px;
    display: flex;
    justify-content: space-around;
    word-wrap: break-word; /* 自动折行 */
    // max-height: 100px;
  }
}
.countContent:nth-of-type(odd) {
  // background: #f5f5f5 !important;
  background: #F7F8FB !important;
}
</style>